<template>
	<div style="margin-top: 60px;">
		<div class="input-group">
			<input type="text" class="form-control" v-model="search">
			<span class="input-group-btn">
				<button class="btn btn-default" type="button" @click="searchNew()">搜索</button>
			</span>
		</div>
		<!-- 顶部选项卡 -->
		<!-- 轮播 -->
		<mt-swipe :auto="4000" class="mint-swipe">
			<mt-swipe-item><img src="../assets/img/food1.jpg" alt="" /></mt-swipe-item>
			<mt-swipe-item><img src="../assets/img/food2.png" alt="" /></mt-swipe-item>
			<mt-swipe-item><img src="../assets/img/food3.png" alt="" /></mt-swipe-item>
		</mt-swipe>
		<div style="height: 30px;margin-top: 10px;">
			<mt-navbar v-model="selected" style="height: 30px;float: right;">
				<router-link to="/list1" style="color: #000000;">
					<i class="icon-2x icon-list"></i>
				</router-link>
			</mt-navbar>
			<a style="color: #000000;font-size: 15px; margin-left: 30px; " @click="pop()">美食</a>
			<a style="color: #000000;font-size: 15px; margin-left: 30px; ">生活</a>
			<a style="color: #000000;font-size: 15px; margin-left: 30px; ">穿搭</a>
			<a style="color: #000000;font-size: 15px; margin-left: 30px; ">娱乐</a>
			<a style="color: #000000;font-size: 15px; margin-left: 30px; ">旅游</a>
		</div>
		<!-- tab-container -->
		<span class="card">
			<div class="card-heading"><i class="icon icon-bullhorn"></i>&nbsp;&nbsp;
				<strong>霜余蔬甲淡中甜，春近录苗嫩不蔹</strong></div>
		</span>
		<div v-for="(item,index) in boardList" :key="index">
			<div class="product-box">
				<img :src="item.src" class="tu">
				<div class="van-multi-ellipsis--l3" id="deta">
					{{item.description}}
				</div>
				<div style="margin-left: 15px;margin-top: 10px;">
					<p style="font-size: 12px; color: goldenrod;">{{item.score}} 分</p>
					<van-tag plain type="danger">{{item.saleout}}</van-tag>
					<div class="pull-right" >
						<i class="icon-heart-empty" style="color: red;" ></i>
						{{item.count}}人喜欢</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'homePage',
		components: {},
		data() {
			return {
				selected: {
					title: ''
				},
				search: '',
				searchnew: '',
				popupVisible: false,
				boardList: [{
						description: ' 保持健康的秘密就是适当的节制食物、饮料、睡眠和爱情。--维克多·雨果《巴黎圣母院》',
						id: '鸡汤',
						src: require('../assets/img/tang.jpg'),
						saleout: '半年售346',
						price: 56,
						score: 4.6,
						count: 333,
					},
					{
						description: '乡愁就是味觉上的思念,无论一个人在外闯荡多少年,即使口音变了,但对故乡的食物,仍怀无限意念。',
						id: '核桃酥',
						src: require('../assets/img/eat1.jpg'),
						saleout: '半年售552',
						price: 12,
						score: 4.8,
						count: 532,
					},
					{
						description: ' 世人个个学长年,不悟长年在目前。我得宛丘(仙人名)平易法,只将食粥致神仙。',
						id: '西点',
						src: require('../assets/img/eat3.jpg'),
						saleout: '任意拼',
						price: 34,
						score: 4.1,
						count: 256,
					},
					{
						description: ' 每个城市都有不同的街景，不同的美食，不同的文化习俗，可是没有你，似乎都一样。',
						id: '粽子',
						src: require('../assets/img/eat4.jpg'),
						saleout: '下单减6',
						price: 16,
						score: 4.3,
						count: 234,
					},
					{
						description: '近看，白嫩嫩的小笼汤包饱满，润泽,嗯,看起来就很好吃。瞧，那皮儿是多么的娇嫩呀,娇嫩得就好像胖娃娃肥嘟嘟的小脸蛋儿，轻轻-捏就破碎了。透过外皮儿，你能清清楚楚地看到里面那纯美的汤汁儿.',
						id: '小笼包',
						src: require('../assets/img/eat2.jpg'),
						saleout: '特产',
						price: 26,
						score: 4.3,
						count: 566,
					},
				],
			};
		},
		methods: {
			searchNew() {
				var searchnew = this.search;
				this.boardList = this.boardList.filter(function(item) { //使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组
					return item.id.match(searchnew); //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
				})
			}
		},
		mounted() {
			//传的是login中的name
			this.username = this.$route.params.name;
		}
	};
</script>
<style scoped="scoped">
	.mint-swipe {
		width: 96%;
		height: 180px;
		margin-top: 10px;
		margin-left: 8px;
		border-radius: 15px;
	}

	.tu {
		border-radius: 15px;
	}

	#deta {
		padding: 10px;
		height: 70px;
	}

	.product-box {
		width: 165px;
		height: 240px;
		border-radius: 15px;
		float: left;
		/* text-align: center; */
		margin-left: 15px;
		background: #F5F5F5;
		margin-top: 5px;
	}
</style>
